<template lang="pug">
.heading-wrap
  img.d-l(src="~@/assets/images/decorate/module-header-l.png")
  .text-wrap
    .text {{title}}
    slot(name="filter")
  img.d-r(src="~@/assets/images/decorate/module-header-r.png")
</template>

<script>
export default {
  name: "Heading1",
  props: {
    title: String,
  }
}
</script>

<style lang="scss" scoped>
.heading-wrap{
  background-color: rgba(255, 255, 255, .15);
  border-radius: rem(12);
  display: flex;
  align-items: center;
  height: rem(60);
  .d-l{
    margin-top: rem(-10);
  }
  .d-r{
    margin-right: rem(20);
  }
  .text-wrap{
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: rem(10);
    .text{
      flex: 1;
      font-size: rem(22);
      color: #ffffff;
      font-weight: 700;
    }
  }
}
</style>
